<template>
    <div style="background-color: #f3f3f3; height: 100%;">
        <router-link to="/iSetUp">
            <div class="head">
                <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="">
                <div class="names">
                    <p style="color: #000; font-size: .6rem; font-weight: 550;">VISITOR</p>
                    <div>
                        Reward for first login
                    </div>
                </div>
                <div class="icons">
                    <i class="iconfont  icon-you" style="font-size: .4rem;"></i>
                </div>
            </div>

        </router-link>
        <div class="buy">
            <router-link to="/iSetUp">
                <div class="recharge">
                    <div>
                        <i class="iconfont  icon-shangcheng" style="font-size: .7rem; color: #a13be9;"></i>
                        <p>TOP UP</p>
                    </div>
                </div>

            </router-link>
            <router-link to="/iSetUp">
                <div class="recharge">
                    <div>
                        <i class="iconfont  icon-qianbao" style="font-size: .7rem; color: #a13be9;"></i>
                        <p>WALLET</p>
                    </div>
                </div>


            </router-link>
        </div>
        <div class="list">
            <div class="lists" @click="lists1">

                <i class="iconfont  icon-duanxin"></i>
                <div class="listsr">
                    <p>Inbox</p>
                    <i class="iconfont icon-xiangzuo-copy" style="font-size: .4rem;"></i>
                </div>
            </div>
            <div class="lists" @click="lists2">
                <i class="iconfont  icon--clock"></i>
                <div class="listsr">
                    <p>Viewed</p>
                    <i class="iconfont icon-xiangzuo-copy" style="font-size: .4rem;"></i>
                </div>
            </div>
            <router-link to="/iSetUp">
                <div class="lists" @click="lists3">
                    <i class="iconfont icon-gerentouxiang_o"></i>
                    <div class="listsr">
                        <p>Following</p>
                        <i class="iconfont icon-xiangzuo-copy" style="font-size: .4rem;"></i>
                    </div>
                </div>
            </router-link>

            <div class="lists" @click="lists4">
                <div class="diamond">
                    <i class="iconfont icon-paixu"></i>
                </div>
                <div class="listsr">
                    <p>Language & Preferevce</p>
                    <i class="iconfont icon-xiangzuo-copy" style="font-size: .4rem;"></i>
                </div>
            </div>

            <div class="lists" @click="lists5">
                <i class="iconfont  icon-cangpeitubiao_xiazaipandiandanxiazaidayinmoban"></i>
                <div class="listsr">
                    <p>Dowmloads</p>
                    <i class="iconfont icon-xiangzuo-copy" style="font-size: .4rem;"></i>
                </div>
            </div>

        </div>
        <div class="exit">
            <div class="lists" @click="lists6">
                <i class="iconfont icon-shichangfankui"></i>
                <div class="listsr">
                    <p>Feedback</p>
                    <i class="iconfont icon-xiangzuo-copy" style="font-size: .4rem;"></i>
                </div>
            </div>

            <div class="lists" @click="lists7">
                <i class="iconfont icon-shezhi"></i>
                <div class="listsr">
                    <p>Setting</p>
                    <i class="iconfont icon-xiangzuo-copy" style="font-size: .4rem;"></i>
                </div>
            </div>
        </div>



        <van-popup v-model="show" position="right" :style="{ height: '100%', width: '100%' }">
            <van-nav-bar title="Inbox" left-arrow :border="false" @click-left="onClickLeft">
                <template #right>

                </template>
            </van-nav-bar>
            <van-tabs v-model="active">
                <van-tab title="标签 1">内容 1</van-tab>
                <van-tab title="标签 2">内容 2</van-tab>
            </van-tabs>
        </van-popup>
        <van-popup v-model="shos" position="right" :style="{ height: '100%', width: '100%' }">
            <van-nav-bar title="Viewed" left-arrow :border="false" @click-left="onClickLeft">
                <template #right>
                </template>
            </van-nav-bar>
            <van-tabs v-model="actives">
                <van-tab title="标签 1">内容 1</van-tab>
                <van-tab title="标签 2">内容 2</van-tab>
                <van-tab title="标签 2">内容 2</van-tab>
            </van-tabs>
        </van-popup>
        <van-popup v-model="shoa" position="right" :style="{ height: '100%', width: '100%' }">
            <van-nav-bar title="Dowmloads" left-arrow :border="false" @click-left="onClickLeft">
                <template #right>
                </template>
            </van-nav-bar>
            <van-tabs v-model="actives">
                <van-tab title="标签 1">内容 1</van-tab>
                <van-tab title="标签 2">内容 2</van-tab>
            </van-tabs>
        </van-popup>
        <van-popup v-model="shod" position="right" :style="{ height: '100%', width: '100%' }">
            <van-nav-bar left-arrow @click-left="onClickLeft" :border="false">

            </van-nav-bar>
            <switchover></switchover>
        </van-popup>
        <van-popup v-model="shob" position="right" :style="{ height: '100%', width: '100%' }">
            <van-nav-bar title="Feedback" left-arrow @click-left="onClickLeft">
                <template #right>

                </template>
            </van-nav-bar>

        </van-popup>
        <van-popup v-model="shoc" position="right" :style="{ height: '100%', width: '100%' }">
            <van-nav-bar title="Setting" left-arrow @click-left="onClickLeft">
                <template #right>

                </template>
            </van-nav-bar>
            <div class=" adds">
                <div class="listsru">
                    <p>Notiflcations</p>
                    <i class="iconfont icon-xiangzuo-copy" style="font-size: .4rem;"></i>
                </div>
            </div>
            <div class="adds">
                <div class="listsru">
                    <p>Clear Cache</p>
                    <div>
                        <div class="box">0KB</div>
                        <div class="box">
                            <h3>Clear</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class=" adds">
                <div class="listsru">
                    <p>Rate Us</p>
                    <i class="iconfont icon-xiangzuo-copy" style="font-size: .4rem;"></i>
                </div>
            </div>
            <div class=" adds">
                <div class="listsru">
                    <p>Terms and Policy</p>
                    <i class="iconfont icon-xiangzuo-copy" style="font-size: .4rem;"></i>
                </div>
            </div>
            <div class="adds">
                <div class="listsru">
                    <p>About</p>
                    <i class="iconfont icon-xiangzuo-copy" style="font-size: .4rem;"></i>
                </div>
            </div>

        </van-popup>


    </div>
</template>

<script>
import switchover from '@/components/iSetUp/switchover.vue'

export default {
    data() {
        return {
            xx: [
                { name: 'Inbox', ico: '' },
                { name: 'Viewed', ico: '' },
                { name: 'Following', ico: '' },
                { name: 'Language & Preferevce', ico: '' },
                { name: 'Dowmloads', ico: '' },
            ],
            variation: false,
            show: false,
            shos: false,
            shoa: false,
            shob: false,
            shoc: false,
            shod: false,
            active: 2,
            actives: 3,
            activea: 2,
        }
    },
    methods: {
        lists1() {
            this.variation = !this.variation
            this.show = !this.show
            // setTimeout(function () {
            //     console.log(156);
            //     _this.variation = false;
            // }, 300)
        },
        onClickLeft() {
            this.show = false
            this.shos = false
            this.shoa = false
            this.shob = false
            this.shoc = false
            this.shod = false
        },
        lists2() {
            this.variation = !this.variation
            this.shos = !this.shos
            // setTimeout(function () {
            //     console.log(156);
            //     _this.variation = false;
            // }, 300)
        },
        lists3() {

        },
        lists4() {
            this.variation = !this.variation
            this.shod = !this.shod
        },
        lists5() {
            this.variation = !this.variation
            this.shoa = !this.shoa

            // setTimeout(function () {
            //     console.log(156);
            //     _this.variation = false;
            // }, 300)
        },
        lists6() {
            this.shob = !this.shob
            console.log(156);
            // setTimeout(function () {
            //     console.log(156);
            //     _this.variation = false;
            // }, 300)
        },
        lists7() {
            this.variation = !this.variation
            this.shoc = !this.shoc
            // setTimeout(function () {
            //     console.log(156);
            //     _this.variation = false;
            // }, 300)
        },
    },
    components: {
        switchover,

    },
}
</script>

<style lang="scss" scoped>
.head {
    display: flex;
    margin-top: .6rem;
    align-items: center;
    background-color: rgb(255, 255, 255);

    img {
        width: 1.92rem;
        height: 1.92rem;
        border-radius: 50%;
        margin-left: .7rem;

    }

    .names {
        width: 10rem;
        height: 2rem;
        line-height: 100%;
        margin-left: .2rem;
        padding-top: .3rem;
        font-size: 0.8rem;


        div {
            display: inline-block;
            height: 0.7rem;
            line-height: 0.8rem;
            border-radius: 1.5rem;
            padding-left: .4rem;
            padding-right: .4rem;
            font-size: 0.25rem;
            color: #fff;
            background-color: #ff53b0;
        }

    }

    .icons {
        margin-right: .3rem;
        height: 100%;
        font-size: .7rem;
    }
}


.buy {
    width: 100%;
    height: 3.5rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgb(255, 255, 255);

    .recharge {
        width: 5.7rem;
        height: 2.5rem;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        border-radius: 0.25rem;
        box-shadow: 0 2px 1.7px 0.85px rgb(52 58 63 / 8%);

        div {
            text-align: center;

            p {

                font-size: .3rem;
                font-weight: 550;
                color: #000;
            }

        }
    }
}

.list {
    width: 100%;
    background-color: #fff;
}

.lists {
    width: 12rem;
    height: 1rem;
    display: flex;
    align-items: center;
    
    i {
        margin-left: 0.4rem;
        margin-top: -0.07rem;
        color: #a13be9;
        font-size: .576rem;
    }

    .diamond {
        width: .38rem;
        height: .38rem;
        margin-left: 0.45rem;
        border-radius: 0.062rem;
        text-align: center;
        border: 0.064rem solid #c679ff;

        i {
            display: block;
            margin-left: 0rem;
            margin-top: 0rem;
            font-size: 0.064rem;
        }
    }

    .listsr {
        width: 10.5rem;
        line-height: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: .3rem;
        color: #484853;
        border-bottom: .0625rem solid rgb(242, 241, 241);

        p {
            font-size: .4rem;
            font-weight: 550;
        }

        i {
            color: #020203;

        }

    }
}

.adds {
    width: 11.4rem;
    height: 1.5rem;
    margin: 0 auto;

    .listsru {
        line-height: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #484853;
        border-bottom: .0625rem solid rgb(242, 241, 241);

        p {
            font-size: .5rem;
            font-weight: 550;
            color: rgb(151, 147, 147);
        }

        i {
            padding-right: .3rem;
            color: #020203;

        }

        div {
            display: flex;
            line-height: 2rem;
            margin-right: .2rem;
            justify-content: center;
            align-items: center;

            div:first-child {
                width: .875rem;
                height: .25rem;
                font-size: .25rem;
                font-weight: 700;
                color: #7b7b7b;
                border: none;
            }

            .box {
                width: 1.76rem;
                height: .8rem;
                font-size: .25rem;
                text-align: center;
                color: #c679ff;
                border: .032rem solid #c679ff;
                border-radius: 0.128rem;
            }

        }


    }
}

.exit {
    width: 100%;
    margin-top: .5rem;
    background-color: #ffffff;
}

.rollback {
    width: 100%;
    height: 5rem;
    background-color: #5252f4;
}

.dianji {
    background-color: #f1f1f1;
}
</style>